<template>
  <div class="div-zong">
    <div v-for="(item,index) in arr" :key="index" class="div-fu" @click="$router.push({ name: '详情', params: { id: item.id } })">
      <div class="div-left">
        <img :src="$pre + item.img" alt />
      </div>
      <div class="div-right">
        <h6>{{ item.goodsname }}</h6>
        <p>现价格：{{ item.price }}</p>
        <del>原价格:{{ item.market_price }}</del>
        <span>立即抢购</span>
      </div>
    </div>
  </div>
</template>

<script>
import {reqhomegoods} from "../../../http/http";
export default {
    data() {
    return {
      arr: [],
    };
  },
  mounted() {
   reqhomegoods().then(res => {
      this.arr = res.data.list[1].content;
    });
  }
};
</script>

<style scoped>
.div-zong {
  width: 360px;
  margin: 0 auto;
  margin-bottom: 0.8rem;
}
.div-fu {
  display: flex;
  flex-direction: row;
}
.div-left {
  width: 150px;
  height: 150px;
}
.div-left img {
  width: 135px;
  height: 135px;
  vertical-align: middle;
}
.div-right {
  width: 200px;
}
.div-right h6 {
  margin-top: 10px;
}
.div-right p,
.div-right del {
  line-height: 30px;
}
.div-right span {
  display: block;
  width: 100px;
  height: 50x;
  text-align: center;
  line-height: 50px;
  background: orange;
  color: white;
}
</style>